<template>
    <div class="container">
        <el-form class="screach" :inline="true" :model="formData">
            <el-form-item label="规则名称">
                <el-input v-model="formData.titleKeyword" placeholder="请输入名称" clearable @keydown.enter="onSearch" />
            </el-form-item>
            <el-form-item label="创建时间">
                <el-date-picker v-model="formData.createAt" type="daterange" start-placeholder="开始时间" end-placeholder="结束时间"
                    format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss" :default-time="defaultTime" />
            </el-form-item>
            <el-form-item label="任务状态">
                <el-select v-model="formData.status" placeholder="全部状态">
                    <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="回复方式">
                <el-select v-model="formData.replyType" placeholder="全部方式">
                    <el-option v-for="item in replyOption" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch">查询</el-button>
                <el-button @click="onReset">清空</el-button>
            </el-form-item>
        </el-form>
        <div class="operate-buttons">
            <el-button type="primary" @click="toCreateRule">新建规则</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
const emit = defineEmits(["search", "reset", "create"]);
const props = defineProps({
    replyType: {
        type: String,
    }
})
/** 任务状态 */
const option = [
    {
        value: 1,
        label: "开启",
    },
    {
        value: 2,
        label: "关闭",
    },
];
/** 回复方式 */
const replyOption = [
    {
        value: 1,
        label: "全部回复",
    },
    {
        value: 2,
        label: "随机回复一条",
    },
];
const defaultTime = ref<[Date, Date]>([
    new Date(2000, 1, 1, 0, 0, 0),
    new Date(2000, 2, 1, 23, 59, 59),
])

const defautlFormData: IFormData = {
    titleKeyword: '',
    createAt: [],
    status: undefined,// 0 全部，1。 启用 2 关闭
    replyType: undefined,// 0 全部， 1 全部 2 随机
}
/**
 * 搜索表单数据
 */
const formData = reactive<IFormData>(defautlFormData);
const onSearch = () => {
    emit('search', formData)
};
const onReset = () => {
    for (const key in formData) {
        formData[key] = undefined
    }
    formData.createAt = []
    formData.titleKeyword = ''
    emit('search', formData)
};

/**
 * 到新建规则页面
 */
const toCreateRule = () => {
    emit('create')
}


defineExpose({
    reset: onReset
})

/**
 * 搜索表单数据类型
 */
interface IFormData {
    /** 规则名称 ｜ 标题 */
    titleKeyword: string,
    /** 创建的时间 */
    createAt: any[],
    /** 任务状态1：开启，2关闭  */
    status?: 0 | 1 | 2,
    /** 回复方式1：全部回复，2随机回复一条  */
    replyType?: 0 | 1 | 2,
}
</script>
<style lang="scss" scoped>
.title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}

.container {
    .screach {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 16px;
        :deep(.el-form-item) {
            width: 100%;
            margin-bottom: 0;

            .el-input,
            .el-select,
            .el-date-editor {
                width: 100%;
            }
        }
    }

    :deep(.el-col:last-child) {
        // text-align: right;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .operate-buttons {
            display: inline-block;
        }
    }
}

.operate-buttons {
    margin-block: 12px;
}
</style>
